<template>
	<view class="">
		<view class="testkog" v-if="istype">
			<view class="" v-if="type == '审核中'">
				<image src="/static/yes.png" mode=""></image>
				<view class="t1">
					申请已提交
				</view>
				<view class="t2">
					审核时间1-2个工作日，请您耐心等待
				</view>
			</view>
			<view class="" v-if="type == '审核驳回'">
				<image src="/static/no.png" mode=""></image>
				<view class="t1">
					申请失败
				</view>
				<view class="t2">
					请根据提示，核准提交信息，重新发起请求
				</view>

				<view class="yy">
					{{reason}}
				</view>
				<view class="footerbtn" @click="handleTwo">
					<view class="cont">
						<view class="btn">
							重新发起申请
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="block_1">
				<view class="tit">
					门店信息
				</view>

				<view class="items">
					<view class="itit">经营品类</view>
					<view class="icont" @click="pageselect">
						<span :style="{color:categoryname?'#000':'#D1CDCD'}">{{categoryname?categoryname:'请选择'}}</span>
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
				<view class="items">
					<view class="itit">门店名称</view>
					<view class="icont">
						<input v-model="params.shopName" type="text" placeholder-class="inputs" placeholder="请输入门店名称" />
					</view>
				</view>
				<view class="items">
					<view class="itit">所在地区</view>
					<view class="icont">
						<region :citylist='citylist' @regionStr='regionchange'></region>
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
				<view class="items" @click="pageMap">
					<view class="dwflex">
						<view class="itit">详细地址</view>
						<view class="flex_b terxt">
							<uni-icons size='18' color="#979797" type="location"></uni-icons>
							定位
						</view>
					</view>
					<view class="test" :style="{color:params.address?'#000':'#D1CDCD'}">
						{{params.address?params.address:'点击定位'}}
						<!-- 	<textarea disabled maxlength='-1'  v-model="params.address" 
						auto-height class="t2" type="text" placeholder-class="inputs" placeholder="请输入详细地址" /> -->
					</view>

				</view>

				<!-- 	<view class="items" @click="gomap">
					<view class="itit">地图位置</view>
					<view class="itit" style="margin: 38rpx auto;">
						位置有误直接影响客户到店，请点开地图仔细核对，拖拽地 图确保位置正确
					</view>
					<view class="maps">
						<map name="" style="width: 100%;height: 200rpx;"></map>
						<view class="abs">
							点击选择准确位置
						</view>
					</view>
				</view> -->


				<view class="imgs">
					<view class="">
						<view style="margin-bottom: 20rpx;" class="">门头照片</view>
						<view class="">
							<imageUpload :upWith="330" :upHeight="200" :imgList="imageList1" :maxCount="1"
								@change="imgFn($event,1)"></imageUpload>
						</view>
					</view>
					<view class="">
						<view style="margin-bottom: 20rpx;" class="">营业执照</view>
						<view class="">
							<imageUpload :upWith="330" :upHeight="200" :imgList="imageList2" :maxCount="1"
								@change="imgFn($event,2)"></imageUpload>
						</view>
					</view>
				</view>

				<view class="imglist">
					<view style="margin-bottom: 20rpx;" class="">其他资质</view>
					<view class="">
						<imageUpload :upWith="160" :upHeight="160" :imgList="imageList" :maxCount="9"
							@change="imgFn($event,3)"></imageUpload>
					</view>
				</view>
			</view>

			<view class="block_1">
				<view class="tit">
					联系信息
				</view>
				<view class="items">
					<view class="itit">联系人</view>
					<view class="icont">
						<input v-model="params.shopPeople" type="text" placeholder-class="inputs"
							placeholder="请输入联系人姓名" />
					</view>
				</view>
				<view class="items">
					<view class="itit">联系电话</view>
					<view class="icont">
						<input :disabled="istwo" v-model="params.shopPhone" type="number" maxlength="11"
							placeholder-class="inputs" placeholder="请输入联系电话" />
					</view>
				</view>
				<view class="items" v-if="!istwo">
					<view class="itit">验证码</view>
					<view class="icont">
						<input v-model="params.code" type="text" placeholder-class="inputs" placeholder="请输入验证码" />
						<view class="" @click="getPhonecode">
							{{codeBtn.codeText}}
						</view>
					</view>
				</view>
			</view>

			<view class="block_1">
				<view class="tit">
					备注信息
				</view>
				<textarea v-model="params.remark" maxlength='-1' class="textarea1" type="text"
					placeholder-class="inputs1" placeholder="请输入备注信息" />
			</view>

			<view class="xy" @click="handlexy">
				<image v-if="isyes" src="../../static/yuana.png" mode=""></image>
				<image v-else src="../../static/yuan.png" mode=""></image>
				<view class="">
					我已阅读并同意<span @click.stop="$pageGo('/pages/user/about?id=6')">商家入驻协议</span>
				</view>
			</view>
			<view class="footerbtn" @click="handleSave">
				<view class="cont">
					<view class="btn">
						提交
					</view>
				</view>
			</view>
			<view class="" style="height: 200rpx;">

			</view>
		</view>
	</view>
</template>

<script>
	import QQMapwx from '@/minxins/amap-wx.130.js'
	import {
		shopregister,
		loginToken,
		getCode,
		getShopinfo,
		shopregisterTwo
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				isyes:false,
				istype: false,
				type: '',
				reason: '',
				params: {
					category: "",
					shopName: '',
					province: '',
					city: '',
					county: '',
					address: '',
					latitude: '',
					longitude: '',
					doorImg: '',
					licenseImg: '',
					otherImg: '',

					shopPhone: '',
					shopPeople: '',
					code: '',
					remark: '',
					fromUserId:''
				},
				categoryname: '',
				isdwopen: false,

				imageList: [],
				imageList1: [],
				imageList2: [],


				//验证码按钮
				codeBtn: {
					codeTime: 60,
					codeText: "获取验证码",
					codeStatus: true
				},
				citylist: [],
				istwo: false, //重新提交 true之后 需要修改字段 接口 提交判断
			};
		},

		onShow() {
			uni.$once('nowType', (data) => {
				this.params.category = data.dictValue
				this.categoryname = data.dictLabel
			})
			uni.$once('address', (data) => {
				this.params.address = data.address
				this.params.latitude = data.latitude
				this.params.longitude = data.longitude
			})
		},
		onLoad(option) {
			console.log(option,'----------------');
			this.params.fromUserId = option.scene
			if (option.type) {
				this.istype = true
				this.istwo = true
				this.type = option.type
				this.reason = option.reason
			} else {
				this.istype = false
				this.istwo = false
				// loginToken({}).then(res => {
				// 	uni.setStorageSync('sjtoken', res.data)
				// })
			}
		},
		methods: {
			handlexy() {
				this.isyes = !this.isyes
				if (this.isyes) {
					this.istrue = false
				}
			},
			imgFn(e, type) {
				if (type == 1) {
					this.imageList1 = e
					this.params.doorImg = e[0].url
				} else if (type == 2) {
					this.imageList2 = e
					this.params.licenseImg = e[0].url
				} else {
					this.imageList = e
					let ulist = e.map(item => {
						return item.url
					})
					this.params.otherImg = ulist.join(',')
				}
			},
			regionchange(e) {
				let list = e.split('/')
				this.params.province = list[0]
				this.params.city = list[1]
				this.params.county = list[2]
			},
			pageselect() {
				uni.navigateTo({
					url: `/pages/index/selectfl?nowtype=${this.params.category}`
				})
			},
			pageMap() {
				let that = this
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.userLocation']) {
							// 未授权，进行授权请求
							that.isdwopen = false
							console.log('2222');
							// this.openweizhi()
							uni.authorize({
								scope: 'scope.userLocation',
								success() {
									that.getlocat()
								}
							})
						} else {
							// 已授权，直接获取位置信息
							that.getlocat()
						}
					}
				})

			},
			openweizhi() {
				uni.openSetting({
					success: (response) => {
						if (response.authSetting['scope.userLocation']) {
							console.log('重新授权获取位置信息-同意');
							// 重新获取定位
							this.getlocat()
						} else {
							console.log('重新授权获取位置信息-未同意');
						}
					},
					fail: () => {
						console.log('openSetting接口调用失败的回调函数');
					}
				})
			},
			getlocat() {
				let that = this
				that.isdwopen = true
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					altitude: true,
					success: function(res) {
						let obj = {
							longitude: res.longitude,
							latitude: res.latitude
						}
						uni.setStorageSync('address', obj)
						uni.navigateTo({
							url: '/pages/index/newmap'
						})
					},
					fail: (err) => {
						console.log(err);
					}
				});
			},
			getPhonecode() {
				let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if (this.params.shopPhone == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入联系人电话'
					})
					return
				}
				if (!reg_tel.test(this.params.shopPhone)) {
					uni.showToast({
						icon: 'none',
						title: '请正确输入联系人电话'
					})
					return
				}
				if (this.codeBtn.codeStatus) {
					getCode({
						phone: this.params.shopPhone
					}).then(res => {
						console.log(res);
					})
					this.codeBtn.codeStatus = false
					let timerId = setInterval(() => {
						let codetime = this.codeBtn.codeTime
						codetime--
						this.codeBtn.codeTime = codetime
						this.codeBtn.codeText = codetime + "s"
						if (codetime < 1) {
							clearInterval(timerId)
							this.codeBtn.codeText = "重新获取"
							this.codeBtn.codeTime = 60
							this.codeBtn.codeStatus = true
						}
					}, 1000)

				}
			},
			handleSave() {
				console.log(this.params);
				if (!this.isyes) {
					uni.showToast({
						icon: 'none',
						title: '阅读并同意协议'
					})
					return
				}
				if (this.params.category == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择经营品类'
					})
					return
				}
				if (this.params.shopName == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入门店名称'
					})
					return
				}
				if (this.params.city == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择所在地区'
					})
					return
				}
				if (this.params.address == '') {
					uni.showToast({
						icon: 'none',
						title: '请定位到详细位置'
					})
					return
				}
				if (this.params.doorImg == '') {
					uni.showToast({
						icon: 'none',
						title: '请上传门头照片'
					})
					return
				}
				if (this.params.licenseImg == '') {
					uni.showToast({
						icon: 'none',
						title: '请上传营业执照'
					})
					return
				}
				if (this.params.otherImg == '') {
					uni.showToast({
						icon: 'none',
						title: '请上传资质'
					})
					return
				}
				if (this.params.shopPhone == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入联系人电话'
					})
					return
				}
				if (this.params.shopPeople == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入联系人'
					})
					return
				}
				if (this.params.code == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					})
					return
				}
				if (this.istwo) {
					console.log('第二次');
					shopregisterTwo(this.params).then(res => {
						if(res.code == 200){
							this.istype = true
							this.type = '审核中'
						}
						
					})

				} else {
					console.log('第一次');
					shopregister(this.params).then(res => {
						if(res.code == 200){
							this.istype = true
							this.type = '审核中'
						}
						
					})
				}



				// const qqmapsdk = new QQMapwx.AMapWX({
				// 	key: 'fec30c445693bf6e07f0c753a07d9667'
				// })
				// qqmapsdk.getGeo({
				// 	options: {
				// 		address:'河南省洛阳市伊川县前富山村',
				// 	},
				// 	success: (res) => {
				// 		console.log(res,'222222222211111111111');
				// 	},
				// 	fail: function(error) {
				// 		console.error(error);
				// 	}
				// })
			},
			handleTwo() {
				getShopinfo({}).then(res => {
					this.params = res.data
					this.categoryname = res.data.category
					this.imageList1 = res.data.doorImg.split(',').map(item => {
						return {
							url: item
						}
					})
					this.imageList2 = res.data.licenseImg.split(',').map(item => {
						return {
							url: item
						}
					})
					this.imageList = res.data.otherImg.split(',').map(item => {
						return {
							url: item
						}
					})
					this.citylist = [res.data.province, res.data.city, res.data.county]
					this.istype = false
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background: #FBFBFB;
	}

	.testkog {
		width: 750rpx;
		text-align: center;
		margin-top: 176rpx;

		image {
			width: 140rpx;
			height: 140rpx;
		}

		.t1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			margin: 40rpx auto;
		}

		.t2 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;
		}

		.yy {
			width: 690rpx;
			height: 120rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			line-height: 120rpx;
			text-align: left;
			margin: 80rpx auto;
			padding-left: 20rpx;
			box-sizing: border-box;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
		}
	}

	.block_1 {
		background: #ffffff;
		padding: 20rpx 30rpx 10rpx;
		margin-bottom: 20rpx;

		.textarea1 {
			width: 690rpx;
			height: 200rpx;
			background: #FBFBFB;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000;
			padding: 20rpx;
			box-sizing: border-box;
			margin: 20rpx auto;
		}

		.inputs1 {
			font-weight: 400;
		}

		.tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
		}

		.imgs {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #eee;
			padding-bottom: 30rpx;

			.img_block {
				width: 330rpx;
				height: 200rpx;
				background: #F6F6F6;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 77rpx;
					height: 80rpx;
				}
			}
		}

		.imglist {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;
			margin: 40rpx auto;

			.img_block {
				width: 160rpx;
				height: 160rpx;
				background: #F6F6F6;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 16rpx;
				margin-bottom: 16rpx;

				image {
					width: 77rpx;
					height: 80rpx;
				}
			}

			.img_block:nth-child(4n+4) {
				margin-right: 0rpx;
			}

			.imgss {
				display: flex;
				flex-wrap: wrap;
			}
		}

		.items {
			margin: 40rpx auto;
			border-bottom: 1px solid #eee;

			.itit {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #979797;
			}

			.dwflex {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.terxt {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #979797;
				}

			}

			.test {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000;
				margin: 20rpx auto;
			}

			.t2 {
				width: 690rpx;
				min-height: 80rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000;
				box-sizing: border-box;
				margin: 20rpx auto;
			}

			.icont {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				padding: 26rpx 0rpx;

				input {
					flex: 1;
				}
			}

			.inputs {
				font-weight: 400;
				color: #D1CDCD;
			}

			.maps {
				position: relative;

				.abs {
					position: absolute;
					backdrop-filter: blur(10px);
					width: 100%;
					height: 200rpx;
					top: 0%;
					text-align: center;
					line-height: 200rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #979797;
				}
			}
		}
	}

	.footerbtn {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 99;

		.cont {
			display: flex;
			padding: 10rpx 20rpx;
			height: 120rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			align-items: center;
			justify-content: center;

			.btn {
				width: 670rpx;
				height: 100rpx;
				background: #000000;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				color: #FFFFFF;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 100rpx;
				text-align: center;
			}

			.absbtn {
				background: #808080;
			}
		}
	}

	.xy {
		display: flex;
		align-items: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #D1D1D6;
		text-align: center;
		width: 400rpx;
		margin: 0 auto;
		span {
			color: #000;
			margin: 0 6rpx;
		}
		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}
</style>